<template>
	<view class="main">
		<tou_hand1 handtitle='用户消费记录'></tou_hand1>
		<view class="show">
			<van-tabs v-model="active"  @change="gbtn">
				<van-tab title="充电记录" name="a">
					<view class="tapthree">
						<view class="cdjl-0" v-if="value">
							<view class="cdjl-0-l" @click="onShowDatePicker('range')">
								{{value[0]}}
							</view>-
							<view class="cdjl-0-l" @click="onShowDatePicker('range')">
								{{value[1]}}
							</view>
						</view>
						<van-collapse v-model="activeNames">
							<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
							<van-list v-model="loading"  :finished="finished" finished-text="没有更多了" @load="loadMore">
							<van-cell v-for="(item, index) in bylist" :key="index" >
							<van-collapse-item :name="index" >
								<template #title>
									<view>
										<view class="tphand">消费金额:<span style="color: #4B98ED;margin-left: 20upx;">¥{{item.realMoney+item.amount}}</span></view>
										<view class="tpfoot">{{item.startTime}}</view>
									</view>
								</template>
								<view class="showtap">
									<view class="stone">
										<view class="stoneleft">
											消费位置:
										</view>
										<view class="stoneright">
											{{item.projectName}}
										</view>
									</view>
									<view class="stone">
										<view class="stoneleft">
											消费类型:
										</view>
										<view class="stoneright" v-show="item.type==0">
											临时充电
										</view>
										<view class="stoneright" v-show="item.type==1">
											本区
										</view>
										<view class="stoneright" v-show="item.type==2">
											跨区
										</view>
									</view>
									<view class="stone">
										<view class="stoneleft">
											充电类型:
										</view>
										<view class="stoneright" v-show="item.chargeType=='A1'">
											包月包时
										</view>
										<view class="stoneright" v-show="item.chargeType=='A3'">
											包月包次
										</view>
										<view class="stoneright" v-show="item.chargeType=='B1'">
											常用计时
										</view>
										<view class="stoneright" v-show="item.chargeType=='B2'">
											常用计量
										</view>
										<view class="stoneright" v-show="item.chargeType=='B3'">
											常用计次
										</view>
										<view class="stoneright" v-show="item.chargeType=='C1'">
											临时计时
										</view>
										<view class="stoneright" v-show="item.chargeType=='B6'">
											价费分离
										</view>
										
									</view>
									<view class="stone">
										<view class="stoneleft">
											充电费率:
										</view>
										<view class="stoneright" v-show="item.rate">
											{{item.rate}}
										</view>
										<view class="stoneright" v-show="!item.rate">
											0
										</view>
									</view>
									<view class="stone">
										<view class="stoneleft">
											结束类型:
										</view>
										<view class="stoneright" v-show="item.stopReason=='01'">
											充满自停
										</view>
										<view class="stoneright" v-show="item.stopReason=='02'">
											达到最大充电时长
										</view>
										<view class="stoneright" v-show="item.stopReason=='03'">
											达到预设时间
										</view>
										<view class="stoneright" v-show="item.stopReason=='04'">
											达到预设电量
										</view>
										<view class="stoneright" v-show="item.stopReason=='05'">
											用户拔出
										</view>
										<view class="stoneright" v-show="item.stopReason=='06'">
											负载过大
										</view>
										<view class="stoneright" v-show="item.stopReason=='07'">
											手动停止
										</view>
										<view class="stoneright" v-show="item.stopReason=='08'">
											功率起伏过大
										</view>
										<view class="stoneright" v-show="item.stopReason=='09'">
											电池未连接好
										</view>
										<view class="stoneright" v-show="item.stopReason=='0A'">
											环境温度过高
										</view>
										<view class="stoneright" v-show="item.stopReason=='0B'">
											端口温度过高
										</view>
									</view>
									<view class="stone">
										<view class="stoneleft">
											充电时长:
										</view>
										<view class="stoneright" >
											{{item.time}}
										</view>
										
									</view>
									<view class="stone">
										<view class="stoneleft">
											结束时间:
										</view>
										<view class="stoneright">
											{{item.endTime}}
										</view>
									</view>
									<view class="stone">
										<view class="stoneleft">
											基本账户消费:
										</view>
										<view class="stoneright">
											{{item.realMoney}}
										</view>
									</view>
									<view class="stone">
										<view class="stoneleft">
											赠送账户消费:
										</view>
										<view class="stoneright">
											{{item.amount}}
										</view>
									</view>
									<view class="stone">
										<view class="stoneleft">
											订单编号:
										</view>
										<view class="stoneright">
											{{item.orderNum}}
										</view>
									</view>
								</view>
							</van-collapse-item>
							
							</van-cell>
							</van-list>
							</van-pull-refresh>
						</van-collapse>
					</view>
				</van-tab>
				<van-tab title="包月记录"  name="b">
					<view class="tapthree">
						<view class="cdjl-0" v-if="value">
							<view class="cdjl-0-l" @click="onShowDatePicker('range')">
								{{value[0]}}
							</view>-
							<view class="cdjl-0-l" @click="onShowDatePicker('range')">
								{{value[1]}}
							</view>
						</view>
						<van-collapse v-model="activeNames1">
							<van-pull-refresh v-model="yrefreshing" @refresh="yonRefresh">
							<van-list v-model="yloading"  :finished="yfinished" finished-text="没有更多了" @load="yloadMore">
							<van-cell v-for="(item, index) in yuelist" :key="index" >
							<van-collapse-item :name="index">
								<template #title>
									<view>
										<view class="tphand">消费金额:<span style="color: #4B98ED;margin-left: 20upx;">¥{{item.useMoney}}</span></view>
										<view class="tpfoot">{{item.createTime}}</view>
									</view>
								</template>
								<view class="showtap">
									<view class="stone">
										<view class="stoneleft">
											小区:
										</view>
										<view class="stoneright">
											{{item.projectName}}
										</view>
									</view>
									<view class="stone">
										<view class="stoneleft">
											使用金额:
										</view>
										<view class="stoneright" >
											¥{{item.useMoney}}
										</view>
										
									</view>
									<view class="stone">
										<view class="stoneleft">
											开始月份:
										</view>
										<view class="stoneright">
											{{item.startMonth}}
										</view>
									</view>
									<view class="stone">
										<view class="stoneleft">
											结束月份:
										</view>
										<view class="stoneright">
											{{item.endMonth}}
										</view>
									</view>
									<view class="stone">
										<view class="stoneleft">
											失效月份:
										</view>
										<view class="stoneright">
											{{item.invalidMonth}}
										</view>
										
									</view>
									<view class="stone">
										<view class="stoneleft">
											购买月数:
										</view>
										<view class="stoneright">
											{{item.monthNums}}
										</view>
									</view>
									<view class="stone">
										<view class="stoneleft">
											套餐次数/时长:
										</view>
										<view class="stoneright">
											{{item.totals}}
										</view>
									</view>
									<view class="stone">
										<view class="stoneleft">
											购买总次数/时长:
										</view>
										<view class="stoneright">
											{{item.nums}}
										</view>
									</view>
									<view class="stone">
										<view class="stoneleft">
											类型:
										</view>
										<view class="stoneright" v-show="item.types=='A1'">
											包时
										</view>
										<view class="stoneright" v-show="item.types=='A3'">
											包次
										</view>
									</view>
									<view class="stone">
										<view class="stoneleft">
											购买时间:
										</view>
										<view class="stoneright">
											{{item.createTime}}
										</view>
									</view>
								</view>
							</van-collapse-item>
							
							</van-cell>
							</van-list>
							</van-pull-refresh>
						</van-collapse>
					</view>
				</van-tab>
			</van-tabs>
		</view>
		<date-picker :show="showPicker" :type="type" class="mask" :value="value" :show-tips="true" :begin-text="'开始'"
		 :end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onCancel"></date-picker>
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand1/tou_hand1.vue'
	import datePicker from "../../components/mx-datepicker.vue";
	import {formatDate} from '../../common/formatDate.js'
	export default {
		components: {tou_hand1,datePicker},
		mounted() {

		},
		created() {
			this.show();
			
		},
		data() {
			return {
				active: 'a',
				activeNames: [''], //当前展开面板的 name
				activeNames1: [''], //当前展开面板的 name
				value: ['请选择开始时间', '请选择结束时间'],
				type: 'range', //时间选择器
				showPicker: false, //时间选择器
				bylist:[],//包月退款数据
				yuelist:[],//余额退款数据
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 10, //每页显示的条数
				yloading: false,
				yfinished: false,
				yrefreshing: false,
				ypageNum: 1, //页码
				ypageSize: 10, //每页显示的条数
				id:'',//用户ID
			}
		},
		onLoad(option) {
			this.active='a'
			this.id=option.id
			this.show();
			if(this.active=='a'){
				this.loadMore();
			}else if(this.active=='b'){
				this.yloadMore()
			}
		},
		methods: {
			show(){
				var nowtime = formatDate(new Date(),'yyyy-MM-dd');				
				var oldtime=formatDate(new Date(new Date().getTime()-2592000000),'yyyy-MM-dd');
				this.value=[oldtime,nowtime]
			},
			gbtn(vul){
				if(vul=='a'){
					this.bylist = [];
					this.onRefresh()
				}else if(vul=='b'){
					this.yuelist = [];
					this.yonRefresh()
				}
			},
			// 充电记录分页
			loadMore() {
				if (this.refreshing) {
				  this.bylist = [];
				  this.refreshing = false;
				}
				const that = this;
				let data = {
					userId: this.id,
					pageNum:that.pageNum,
					pageSize:that.pageSize,
					startTime:that.value[0],
					endTime:that.value[1]
				}
				that.loading = true;
				that.$base.request('consumeRecord/list', 'GET', data)
					.then(res => {
						that.loading = false;
						if(res.data.rows&&res.data.rows.length>0){
							that.bylist = that.bylist.concat(res.data.rows);
							that.pageNum += 1;
						}else{
							that.finished = true;
						}
					})
					.catch(err => {
				
					})
			},
			 onRefresh() {
			      // 清空列表数据
			      this.finished = false;
				  this.pageNum=1
			      // 重新加载数据
			      // 将 loading 设置为 true，表示处于加载状态
			      this.loading = true;
			      this.loadMore();
			    },
			
			// 包月购买记录分页
			yloadMore() {
				if (this.yrefreshing) {
				  this.yuelist = [];
				  this.yrefreshing = false;
				}
				const that = this;
				let data = {
					userId: this.id,
					pageNum:that.ypageNum,
					pageSize:that.ypageSize,
					startTime:that.value[0],
					endTime:that.value[1]
				}
				that.yloading = true;
				that.$base.request('userMonthly/list', 'GET', data)
					.then(res => {
						that.yloading = false;
						if(res.data.rows&&res.data.rows.length>0){
							that.yuelist = that.yuelist.concat(res.data.rows);
							that.ypageNum += 1;
						}else{
							that.yfinished = true;
						}
					})
					.catch(err => {
				
					})
			},
			 yonRefresh() {
			      // 清空列表数据
			      this.yfinished = false;
				  this.ypageNum=1
			      // 重新加载数据
			      // 将 loading 设置为 true，表示处于加载状态
			      this.yloading = true;
			      this.yloadMore();
			    },	
			//选择时间点击确定
			onSelected(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					for(var i=0;i<e.value.length;i++){
						e.value[i]=formatDate(new Date(e.value[i]),'yyyy-MM-dd')
					}
					this.value = e.value;
					if(this.active=='a'){
						this.bylist = [];
						this.onRefresh()
					}else if(this.active=='b'){
						this.yuelist = [];
						this.yonRefresh()
					}
				}
			},
			//选择时间点击取消
			onCancel() {
				this.showPicker = false;
				var nowtime = formatDate(new Date(),'yyyy-MM-dd');
				var oldtime=formatDate(new Date(new Date().getTime()-2592000000),'yyyy-MM-dd');
				this.value=[oldtime,nowtime]
			},
			//点击时间框选择时间
			onShowDatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		// overflow-x: hidden;
		background-color: #F5F5F5;
		/deep/.van-list__finished-text{
			margin-top: 100upx;
			padding-bottom: 200upx;
		}
		/deep/.van-hairline--top-bottom::after{
			border-width: 0;
		}
		.show {
			/deep/.van-tab {
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				color: #999999;
			}
			/deep/.van-cell{
				margin-top: 30upx;
			}
			/deep/.van-tab--active {
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				color: #4b98ed;
			}

			/deep/.van-tabs__line {
				width: 91upx !important;
				height: 4upx;
				border-radius: 2px;
				background-color: #4B98ED;
			}

			.tapthree {
				width: 686upx;
				margin: 16upx auto;
				.cdjl-0 {
					display: flex;
					height: 100upx;
					background: #fff;
					align-items: center;
					justify-content: space-around;
				
					.cdjl-0-l {
						height: 60upx;
						width: 260upx;
						border-radius: 10upx;
						border: 2upx solid #ccc;
						font-size: 30upx;
						line-height: 60upx;
						color: #bbbbbb;
						text-align: center;
					}
				
					.cdjl-0-r {
						width: 120upx;
						height: 60upx;
						font-size: 20upx;
						background: #4e9ff6;
						color: #fff;
						line-height: 60upx;
						text-align: center;
						border-radius: 10upx;
					}
				}
				.tphand {
					font-size: 28upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #333333;
				}

				.tpfoot {
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;
					margin-top: 10upx;
				}

				/deep/.van-collapse {
					background-color: #F5F5F5;
				}

				/deep/.van-collapse-item {
					margin-top: 22upx;
				}

				/deep/.van-collapse-item__content {
					padding: 0 30upx;
				}

				/deep/.van-cell {
					align-items: center;
					padding: 10upx 20upx;
				}

				.showtap {
					width: 100%;
					box-sizing: border-box;
					padding: 40upx 0;

					.stone {
						width: 100%;
						box-sizing: border-box;
						display: flex;
						margin-bottom: 15upx;

						.stoneleft {
							font-size: 24upx;
							font-family: PingFang SC Regular, PingFang SC Regular-Regular;
							font-weight: 400;
							color: #333333;
							width: 45%;
						}

						.stoneright {
							font-size: 24upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #333333;
						}
					}
				}

			}


		}

	}
</style>
